<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}">
    <style>
        .goods-list-image {
            width: 100px;
        }

        .laytable-cell-1-0-1, .laytable-cell-1-0-2, .laytable-cell-1-0-3 {
            height: 100% !important;
            white-space: inherit !important;
        }

        img[src=null],
        img:not([src]) {
            opacity: 0;
        }

        .goods-tag {
            color: #7e8038;
            border: 1px solid;
            border-radius: 2px;
            padding: 0 3px;
            margin: 2px;
            display: inline;
            line-height: 20px;
        }
    </style>
</head>
<body>

<div class="layui-row">

    <div class="layui-inline">
        <label>商品id</label>
        <div class="layui-input-inline" style="width: 150px;">
            <input type="text" id="goodsId" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline" style="width: 150px;">
            <input type="text" id="goodsName" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" onclick="query()">查询</button>
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" onclick="goodsAdd()">增加</button>
        </div>
    </div>

</div>

<table id="goodsList" lay-filter="goodsTable"></table>

<!--商品名称+标签-->
<script type="text/html" id="goodsNameAndTag">
    <div>
        <div>{{d.name}}</div>
        <ul style="display: flex;flex-wrap: wrap;">
            {{# layui.each(d.tagList, function(index, item){ }}
            <li style="color: {{ item.style }}" class="goods-tag">
                <span>{{ item.name }}</span>
            </li>
            {{# }); }}
            {{# if(d.tagList === null || d.tagList.length === 0){ }}

            {{# } }}
        </ul>
    </div>
</script>
<!--商品图片-->
<script type="text/html" id="goodsListImage">
    <img src="{{d.img}}" class="goods-list-image"/>
</script>
<!--操作项单元格-->
<script type="text/html" id="goodsBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="tag">打标</a>
</script>

<script th:src="@{/webjars/layui/layui.all.js}"></script>
<script th:src="@{/webjars/jquery/jquery.js}"></script>
<script th:src="@{/js/common/common.js}"></script>
<script th:src="@{/js/goods/goods.js}"></script>
</body>
</html>